<template>
  <div class="genghuanbox">
    <!-- 4个方块 -->
    <div class="fangkuai">
      <div class="fangkuaileft">
       <div class="fangkuaishuzhitit">
            <div class="fangkuaishuzhi">{{indexinfo.follows}}</div>
            <div class="fangkuaitit">粉丝数</div>
          </div>
          <div class="fangkuaishuzhitit">
          <div class="fangkuaishuzhi">{{indexinfo.records}}</div>
            <div class="fangkuaitit">累计阅读量</div>
          </div>
          <div class="fangkuaishuzhitit">
            <div class="fangkuaishuzhi">{{indexinfo.total_balance}}</div>
            <div class="fangkuaitit">累计收入</div>
          </div>
       
      </div>
      <div class="fangkuairigh">
         <div class="fangkuaishuzhitit" style="width:100%;">
            <div class="kaishichuangzuo shoushou" @click="tofawen">
              <img src="../assets/bj.png" alt="">
              开始创作
              </div>
            <div class="shangwuhao">上午好,{{userinfo.nickname}}</div>
          </div>
      </div>
    </div>
    <!-- 两个方块 -->
    <div class="xinzeng">
      <div class="xinzengxiaoxi">
        <div class="xinzengtit">
          <div>新增消息</div>
          <div class="gengduo shoushou" @click="togenduoxx">
            更多
            <img src="../assets/gengduo.png" alt />
          </div>
        </div>
        <div class="xiaoxibox">
          <div class="xiaoxiboxright">
            <div class="gonggaoitem" v-if="xiaoxilist[0]">
              <img src="../assets/ju.png" alt />
              {{xiaoxilist[0].created_at}} 【{{xiaoxilist[0].content}}】
            </div>
            <div class="gonggaoitem" v-if="xiaoxilist[1]">
              <img src="../assets/lu.png" alt />
              {{xiaoxilist[1].created_at}} 【{{xiaoxilist[1].content}}】
            </div>
            <div class="gonggaoitem" v-if="xiaoxilist[2]">
              <img src="../assets/lan.png" alt />
              {{xiaoxilist[2].created_at}} 【{{xiaoxilist[2].content}}】
            </div>
          </div>
        </div>
      </div>
      <div class="xinzenggonggao">
        <div class="xinzengtit">
          <div>新增公告</div>
          <div class="gengduo shoushou" @click="togengduogg">
            更多
            <img src="../assets/gengduo.png" alt />
          </div>
        </div>
        <div class="ganggaobox">
          <div class="gonggaoitem" v-if="gonggaolist[0]">
            <img src="../assets/gonggaocheng.png" alt />
            <div style="color:#FF8B00">{{gonggaolist[0].title}}</div>
          </div>

          <div class="gonggaoitem" v-if="gonggaolist[1]">
            <img src="../assets/gonggaolv.png" alt />
            <div style="color:#48B012">{{gonggaolist[1].title}}</div>
          </div>

          <div class="gonggaoitem" v-if="gonggaolist[2]">
            <img src="../assets/gonggaolan.png" alt />
            <div style="color:#266AFF">{{gonggaolist[2].title}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 一个方块 -->
    <div class="huodong-xuexi">
      <div class="huodong-xuexi-header">
        <div class="hd-xx-head-left">
          <div class="huodongbox shoushou" @click="totab(1)">
            <div class="xuexitit" :class="[selecttab==1?'huodongtit':'']">活动</div>
            <div v-if="selecttab==1" class="xiahuaxian"></div>
          </div>
          <div class="xuexibox shoushou" @click="totab(2)">
            <div class="xuexitit" :class="[selecttab==2?'huodongtit':'']">学习</div>
            <div v-if="selecttab==2" class="xiahuaxian"></div>
          </div>
        </div>
        <div class="hd-xx-head-right shoushou" @click="togengduoxxhd">
          <div>更多</div>
          <img src="../assets/gengduo.png" alt />
        </div>
      </div>
      <!-- 活动 -->
      <div class="huodong" v-if="selecttab==1">
        <div
          class="huodongitem shoushou"
          v-for="(item,index) in huodonglist"
          :key="index"
          @click="todetails(item.id,'hd')"
        >
          <div class="huodongitem1">
            <img src="../assets/huo.png" alt />
            <div>{{item.title}}</div>
          </div>
          <div>{{item.created_at}}</div>
        </div>
      </div>

      <!-- 学习 -->
      <div class="xuexi" v-if="selecttab==2">
        <div class="xuexishang">
          <div
            class="xuexishangitem shoushou"
            style="background:#ECF0FB;color:#6171FC"
            @click="todetails(-1,'sc')"
          >
            <img class="shouce1" src="../assets/shouce1.png" alt />
            <div>文章创作手册</div>
          </div>
          <div
            class="xuexishangitem shoushou"
            style="background:#E7F9F3;color:#33C392"
            @click="todetails(-2,'sc')"
          >
            <img class="shouce2" src="../assets/shouce2.png" alt />
            <div>视频创作手册</div>
          </div>
          <div
            class="xuexishangitem shoushou"
            style="background:#FFEFEF;color:#F57974"
            @click="todetails(-3,'sc')"
          >
            <img class="shouce3" src="../assets/shouce3.png" alt />
            <div>涨粉设置手册</div>
          </div>
          <div
            class="xuexishangitem shoushou"
            style="background:#FEF9E6;color:#EFBD3A"
            @click="todetails(-4,'sc')"
          >
            <img class="shouce4" src="../assets/shouce4.png" alt />
            <div>收益获取手册</div>
          </div>
        </div>
        <div class="xuexixia">
          <div
            class="xuexixiaitem shoushou"
            v-for="(item,index) in xuexilist"
            :key="index"
            @click="todetails(item.id,'xx')"
          >
            <div class="xuexixiaitem1">
              <img src="../assets/xiaoqizi.png" alt />
              <div>{{item.title}}</div>
            </div>
            <div>{{item.created_at}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // key: value
      xiaoxilist: "",

      gonggaolist: "",
      huodonglist: "",
      xuexilist: "",
      selecttab: 1,
      indexinfo: "",
      userinfo: "",
    };
  },
  methods: {
    todetails(id, type) {
      this.$router.push({
        path: "/index/gg_yd_details",
        query: { type: type, id: id },
      });
      this.$store.state.mianbaoxie = ["乐讯号", "详情"];
    },
    togenduoxx() {
      this.$router.push({ name: "gengduoxx", params: {} });
    },

    togengduogg() {
      this.$router.push({ name: "gengduogg", params: {} });
    },

    togengduoxxhd() {
      this.$router.push({
        path: "/index/gengduoxxhd",
        query: { selecttab: this.selecttab },
      });
    },

    totab(index) {
      this.selecttab = index;
      if (index == 1) {
        this.$store.state.mianbaoxie = ["乐讯号", "主页"];
      }

      if (index == 2) {
        this.$store.state.mianbaoxie = ["乐讯号", "主页"];
      }
    },
    getxiaoxi() {
      this.$get(
        // method: "get",
        "media/users/news_list",
        {
          uqid: localStorage.getItem("uqid"),
          page: "1",
          limit: "3",
        }
      ).then((response) => {
        console.log(response);
        if (response.error == "0") {
          this.xiaoxilist = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.message,
            type: "error",
          });

          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },

    getgonggao(type) {
      this.$get(
        // method: "get",
        "media/users/notice_list",
        {
          uqid: localStorage.getItem("uqid"),
          type: type,
          page: "1",
          limit: "1000",
        }
      ).then((response) => {
        console.log(response);
        if (response.error == "0") {
          // this.xiaoxilist = response.data;
          //  this.gonggaolist=response.data;
          if (type == 1) {
            this.gonggaolist = response.data;
          }
          if (type == 2) {
            this.huodonglist = response.data;
          }
          if (type == 3) {
            this.xuexilist = response.data;
          }
        } else {
          this.$message({
            showClose: true,
            message: response.message,
            type: "error",
          });
          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },

    tofawen() {
      this.$router.push({ path: "/fawen2", query: { toptab: "1" } });
    },

    gettongji() {
      // media/users/index_count

      this.$get(
        // method: "get",
        "media/users/index_count",
        {
          uqid: localStorage.getItem("uqid"),
        }
      ).then((response) => {
        console.log(response);
        if (response.error == "0") {
          this.indexinfo = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.message,
            type: "error",
          });

          if (response.error == "4010") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4011") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4012") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
          if (response.error == "4014") {
            this.$router.push({ path: "/login", query: {} });
            return;
          }
        }
      });
    },
  },
  mounted() {
    if (!localStorage.getItem("uqid")) {
      this.$router.push({ path: "/login", query: {} });
      return;
    }
    this.getxiaoxi();

    this.gettongji();

    this.getgonggao(1);
    this.getgonggao(2);
    this.getgonggao(3);

    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
  },
};
</script>

<style  scoped>
.fangkuaileft {
  width: 75%;
  margin-right: 20px;

  height: 158px;
  background: #826ae2;
  display: flex;
  align-items: center;
}
.fangkuairigh {
  width: 25%;

  height: 158px;
  background: #ff8b00;
}
.gengduo {
  font-size: 12px;
  font-weight: 400;

  color: rgba(172, 172, 172, 1);
}

.genghuanbox {
  width: 100%;
  height: calc(100vh - 168px);
  overflow-y: scroll;
  overflow-x: hidden;
}
.genghuanbox::-webkit-scrollbar {
  display: none;
}
/* 4个方块 */
.fangkuai {
  width: 100%;
  /* height: 95px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.fangkuaiitem {
  width: 23%;
  height: 95px;
  opacity: 1;
  border-radius: 10px;
  position: relative;
}

.fangkuaishuzhitit {
  /* margin: auto;
  width: 113px;
  height: 100%;
  text-align: center;
  margin-top: 18px; */
  width:33.333%;
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.fangkuaishuzhi {
  font-size: 32px;
  font-weight: 400;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.fangkuaitit {
  margin-top: 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.kaishichuangzuo {

    width:128px;
  height:34px;
  border:1px solid rgba(255,255,255,1);
  opacity:1;
 
  border-radius: 4px;
  line-height: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.shangwuhao {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fangkuaitu {
  position: absolute;
  right: 0;
  bottom: 0;
}
.fensi {
  width: 58px;
  height: 75px;
}
.yueduliang {
  width: 69px;
  height: 61px;
}
.shouru {
  width: 68px;
  height: 70px;
}
.chuangzuo {
  width: 53px;
  height: 49px;
}
/* <!-- 两个方块 --> */
.xinzeng {
  width: 100%;
  height: 189px;
  display: flex;
  justify-content: space-between;
}
.xinzengxiaoxi {
  width: 48%;
  height: 189px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 4px 4px 10px rgba(218, 218, 218, 0.5);
  opacity: 1;
  padding: 26px 21px 36px 47px;
  box-sizing: border-box;
}
.xinzengtit {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xiaoxibox {
  display: flex;
  align-items: center;
  height: 92px;
  margin-top: 17px;
  width: 100%;
}
.xiaoxiboxleft {
  width: 18px;
  height: 90px;
  margin-right: 4px;
}
.xiaoxiboxleft img {
  width: 18px;
  height: 90px;
}
.xiaoxiboxright {
  width: calc(100% - 22px);
  height: 100%;
}
.xiaoxiboxright div {
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xinzenggonggao {
  width: 48%;
  height: 189px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 4px 4px 10px rgba(218, 218, 218, 0.5);
  opacity: 1;
  padding: 26px 21px 36px 47px;
  box-sizing: border-box;
}
.ganggaobox {
  height: 92px;
  margin-top: 17px;
  width: 100%;
}
.gonggaoitem {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 2px;
}
.gonggaoitem img {
  width: 18px;
  height: 18px;
  margin-right: 13px;
}
.gonggaoitem div {
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* <!-- 一个方块 --> */
.huodong-xuexi {
  width: 100%;
  min-height: calc(100vh - 560px);
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-top: 20px;
  /* overflow-y: scroll; */
}
.huodong-xuexi-header {
  width: 100%;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 29px;
  padding-right: 19px;
  box-sizing: border-box;
}
.hd-xx-head-left {
  display: flex;
  align-items: center;
}
.huodongbox {
  width: 34px;
  height: 100%;
  text-align: center;
  margin-right: 34px;
  position: relative;
}
.huodongtit {
  font-size: 14px;
  font-weight: 400;
  line-height: 39px;
  color: rgba(51, 51, 51, 1) !important;
  opacity: 1;
}
.xuexibox {
  width: 34px;
  height: 100%;
  text-align: center;
  position: relative;
}
.xuexitit {
  font-size: 16px;
  font-weight: 550;
  line-height: 39px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  /* position: relative; */
}
.xiahuaxian {
  position: absolute;
  bottom: 1;
  width: 34px;
  height: 2px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
}
.hd-xx-head-right {
  display: flex;
  align-items: center;
}
.hd-xx-head-right div {
  font-size: 12px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
  margin-right: 5px;
}
.hd-xx-head-right img {
  width: 6px;
  height: 9px;
}
/* 活动 */
.huodong {
  width: 100%;
  padding: 0 21px 20px;
  box-sizing: border-box;
}
.huodongitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 26px;
}
.huodongitem1 {
  display: flex;
  align-items: center;
}
.huodongitem1 img {
  width: 16px;
  height: 20px;
  margin-right: 13px;
}
/* 学习 */
.xuexi {
  width: 100%;
  padding: 0 27px;
  box-sizing: border-box;
}
.xuexishang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.xuexishangitem {
  width: 23%;
  height: 200px;
  opacity: 1;
  border-radius: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.xuexishangitem img {
  margin-top: 51px;
  margin-bottom: 17px;
}
.xuexishangitem .shouce1 {
  width: 55px;
  height: 66px;
}
.xuexishangitem .shouce2 {
  width: 78px;
  height: 54px;
}
.xuexishangitem .shouce3 {
  width: 66px;
  height: 66px;
}
.xuexishangitem .shouce4 {
  width: 69px;
  height: 63px;
}
.xuexixia {
  margin-top: 30px;
  padding-left: 14px;
  padding-right: 20px;
  box-sizing: border-box;
  padding-bottom: 20px;
}
.xuexixiaitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
  font-size: 14px;
}
.xuexixiaitem1 {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.xuexixiaitem1 img {
  width: 23px;
  height: 23px;
  margin-right: 7px;
}

.xuexigonggao {
  width: 100%;
  height: calc(100% - 98px);
  overflow-y: scroll;
  overflow-x: hidden;
}
.xuexigonggao::-webkit-scrollbar {
  display: none;
}
</style>